<template>
  <div>
    <m-header :title="iNowTitle" :to="to" :isRight="false" :isBack="true"></m-header>
    <form action="/mobile/api/v1.0/user/oAuthPersonal" ref="personalForm" method="post" name="personalForm"
          enctype="multipart/form-data">
      <div class="account">
        <div class="account_form">
          <div class="account_line">
            <div class="account_title">真实姓名</div>
            <div class="account_input">
              <input class="input_select" name="realname" type="text" v-model="user.realname" placeholder="请输入姓名"/>
            </div>
          </div>
          <p class="err_msg" style="color:#999;">认证成功后将默认作为发票抬头</p>
          <div class="account_line">
            <div class="account_title">证件类型</div>
            <div class="account_input">
              <RadioGroup v-model="user.idType">
                <Radio label="身份证"></Radio>
                <Radio label="护照"></Radio>
              </RadioGroup>
            </div>
            <input v-if="user.idType == '身份证'" type="hidden" value="1" name="idType">
            <input v-if="user.idType == '护照'" type="hidden" value="2" name="idType">
          </div>
          <div class="account_line">
            <div class="account_title">证件号码</div>
            <div class="account_input">
              <input class="input_select" type="text" name="idNbr" v-model="user.id_nbr" placeholder="请输入证件号码"/>
            </div>
          </div>
          <p class="err_msg"></p>
          <div class="account_line account_line_wrap">
            <div class="account_title">证件照片</div>
            <div class="account_right">
              <div class="input_wrap">
                <img id="file_img" class="default_icon" :src="user.remote_path" alt="">
                <input id="fileInput" class="file" accept='image/*' name="idCardFile" ref="idCardFile" type="file"
                       @change="submitImg()">
                <input type="hidden" v-model="user.idCardFileFileName" name="idCardFileFileName">
              </div>
              <p class="desc_text">证件上传必须是原件或加盖公章的复印件（证件文字清晰）;文件仅支持10M以内的jpg，jpeg，png或gif。</p>
              <p class="image_title">拍照示例：</p>
              <img class="default_img" src="./default_img.png" alt="">
            </div>
          </div>
        </div>
        <div class="tips">
          <p>*认证信息请与本人支付宝保存一致，否则会认证失败</p>
        </div>
      </div>
      <div class="btn_big bind_big_btn" @click="setInfo">开始认证</div>
    </form>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK, defaultImg, IMGHOST} from 'config/config'
  import {Radio, RadioGroup} from 'iview'
  import {Toast} from 'mint-ui'
  import 'mint-ui/lib/toast/style.css';

  import {isCardNumb} from 'common/js/util'

  export default {
    data() {
      return {
        iNowTitle: '个人开发者认证',
        to:'/accountSelect',
        size: 0,
        user: {
          realname: '',
          idType: '身份证',
          id_nbr: '',
          remote_path: defaultImg,
          idCardFile: '',
          idCardFileFileName: ''
        },
      }
    },
    created: function () {
      this.getInfo();
    },
    methods: {
      submitImg() {
        //选择图片显示预览图
        var file = document.getElementById("fileInput").files[0];
        let _perview = document.getElementById('file_img');
        let preview = _perview;
        this.user.idCardFileFileName = file.name;
        this.size = file.size;

        if (file.size > 1024 * 1024 * 10) {
          Toast('图片大小不能大于10M！');
          return
        }
        let reader = new FileReader();
        reader.onloadend = function () {
          _perview.src = reader.result;
        }
        if (file) {
          reader.readAsDataURL(file);
        } else {
          _perview.src = "";
        }
      },
      getInfo() {
        this.$http({
          url: '/mobile/api/v1.0/user/updatePerson',
          method: 'post'
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.user.id_nbr = res.data.data.id_nbr;
            this.user.realname = res.data.data.realname;
            //this.user.remote_path = IMGHOST + res.data.data.remote_path;
            if (res.data.data.id_type == '1') {
              this.user.idType = '身份证';
            } else if (res.data.data.id_type == '2') {
              this.user.idType = '护照';
            }
          } else {
            Toast('数据获取失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      setInfo() {
        //action="/mobile/api/v1.0/user/oAuthPersonal"

        if (!this.user.realname) {
          Toast('姓名不能为空！');
          return
        }

        this.user.idCardFile = this.$refs.idCardFile.value;


        if (this.size > 1024 * 1024 * 10) {
          Toast('图片大小不能大于10M');
          return
        }

        if (!this.user.idCardFile || !this.user.idCardFileFileName) {
          Toast('请上传证件照！');
          return
        }

        if(!this.user.id_nbr){
          Toast('身份证号码不能为空！');
          return
        }

        if (this.user.idType == '身份证') {
          this.user.idType = '1';
          if (!isCardNumb(this.user.id_nbr)) {
            Toast('身份证号码不正确！');
            this.user.idType = '身份证';
            return
          }
        } else if (this.user.idType == '护照') {
          this.user.idType = '2';
        }
        this.$refs.personalForm.submit();
      }
    },
    components: {
      MHeader,
      RadioGroup,
      Radio
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
</style>
